<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 Highcharts 图表</title>
</head>
<body>
    <!-- 图表容器 DOM -->
    <div id="container" style="width: 600px;height:400px;"></div>
    <!-- 引入 highcharts.js -->
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script>
		var arr = [{
			name:'xpf',
			age:23,
			grade:60
		},{
			name:'zhangsan',
			age:19,
			grade:80
		},{
			name:'lisi',
			age:14,
			grade:90
		}]
		var ages = arr.map(function(item){
			return item.age;
		})

        // 图表配置
        var chart = Highcharts.chart('container', {
			title: {
				text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
			},
			subtitle: {
				text: '数据来源：thesolarfoundation.com'
			},
			yAxis: {
				title: {
					text: '就业人数'
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
			},
			plotOptions: {
				series: {
					label: {
						connectorAllowed: false
					},
					pointStart: 2010
				}
			},
			series: [{
				name: '安装，实施人员',
				data: ages
			}],
			responsive: {
				rules: [{
					condition: {
						maxWidth: 500
					},
					chartOptions: {
						legend: {
							layout: 'horizontal',
							align: 'center',
							verticalAlign: 'bottom'
						}
					}
				}]
			}
		});
    </script>
</body>
</html>
